<html>
<html>
<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <link href="${ctx}/select2/4.0.6-rc.1/css/select2.min.css" rel="stylesheet">
    <script src="${ctx}/layui/layui.all.js"></script>
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <style>
        .btn {
            font-size: 12px;
        }

        .table th, .table td {
            vertical-align: middle !important;
        }

        .select-editable {
            position: relative;
            background-color: white;
            border: solid grey 1px;
            width: 120px;
            height: 18px;
        }

        .select-editable select {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 14px;
            border: none;
            width: 120px;
            margin: 0;
        }

        .select-editable input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            padding: 1px;
            font-size: 12px;
            border: none;
        }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }

        .row {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: wrap;
        }

        .row > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }


    </style>
</head>
<body>
<div class="container-fluid">
    <div class="input-group" style="float: left; max-width: 380px; margin-right:15px;">
        <span class="input-group-addon">匹配时间</span>
        <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="startTime">
        <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="endTime">
    </div>
    <div class="input-group" style="float: left; max-width: 200px; margin-right:15px;">
        <span class="input-group-addon">选择任务</span>
        <select id="taskId" class="form-control" style="">
            <option value="">全部</option>
            <#list task as status>
                <option value="${status.task_id}">${status.title}</option>
            </#list>
        </select>
    </div>
    <div class="btn-group" style="float: left;">
        <button id="search_btn" class="btn btn-info">查询</button>
    </div>
    <div class="input-group" style="float: left; width: 200px;  margin-left:20px; margin-right:20px;">
        <span class="input-group-addon">上传</span>
        <input type="file" class="form-control" id="file">
    </div>
    <div class="btn-group">
        <button id="upload_btn" class="btn btn-primary">导入</button>
    </div>
    <div class="btn-group col-md-offset-4">
        <button id="delData" class="btn btn-danger">清除数据</button>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">

            <div class="row clearfix">
                <div class="col-md-6 column">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <table class="table" id="table-methods-table-left"></table>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default btn-info btn-block" id="mate_btn">匹配</button>
                </div>
                <div class="col-md-6 column">
                    <div class="row clearfix">
                        <div class="col-md-4 column">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table class="table " id="table-methods-table-s"></table>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default btn-success btn-block" id="uploadCheckT">审核通过
                            </button>
                        </div>
                        <div class="col-md-4 column">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table class="table " id="table-methods-table-z"></table>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default btn-block btn-warning" id="uploadCheckF">审核失败
                            </button>
                        </div>
                        <div class="col-md-4 column">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table class="table" id="table-methods-table-x"></table>
                                </div>
                            </div>
                            <button type="button" class="btn btn-default btn-block btn-primary">按钮</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
<script src="${ctx}/select2/4.0.6-rc.1/js/select2.min.js"></script>
<script src="${ctx}/js/extends.js"></script>
<script>

    function queryParams(opt) {
        opt.taskId = $("#taskId").val();
        opt.stime = $("#startTime").val();
        opt.etime = $("#endTime").val();

        return opt;
    }
    ;
    $tableLeft = $('#table-methods-table-left').bootstrapTable({
        url: '/multiword/getPhone', //请求后台的URL（*）
        method: 'post', //请求方式（*）
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true,
        dataType: "json",
        pagination: true,
        // "queryParamsType": "limit",
        singleSelect: false,
        contentType: "application/x-www-form-urlencoded",
        pageSize: 100,
        pageNumber: 1,
        search: false, //不显示 搜索框
        showColumns: false, //不显示下拉框（选择显示的列）
        sidePagination: "server", //服务端请求
        queryParams: queryParams,
        //minimunCountColumns: 2,
        pageList: [100, 200, 500], //可供选择的每页的行数（*）
        //queryParams : oTableInit.queryParams,//传递参数（*）
        searchOnEnterKey: true,
        strictSearch: true,
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: false, //是否启用点击选中行
        //height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        height: $(window).height() * 0.91,
        uniqueId: "userId", //每一行的唯一标识，一般为主键列
        exportDataType: "selected", //basic', 'all', 'selected'
        columns: [{
            field: 'phone',
            title: '用户号码',
            width: '100px'
        }],
        responseHandler: function (res) {
            return {
                "total": res.total, //总页数
                "rows": res.rows //数据
            };
        }
    });


    $tableRight = $('#table-methods-table-s').bootstrapTable({
        url: '/multiword/checkSuccess', //请求后台的URL（*）
        method: 'post', //请求方式（*）
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true,
        dataType: "json",
        pagination: true,
        // "queryParamsType": "limit",
        singleSelect: false,
        contentType: "application/x-www-form-urlencoded",
        pageSize: 50,
        pageNumber: 1,
        search: false, //不显示 搜索框
        showColumns: false, //不显示下拉框（选择显示的列）
        sidePagination: "server", //服务端请求
        queryParams: queryParams,
        //minimunCountColumns: 2,
        pageList: [50, 200, 500], //可供选择的每页的行数（*）
        //queryParams : oTableInit.queryParams,//传递参数（*）
        searchOnEnterKey: true,
        // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        //showColumns: true, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: false, //是否启用点击选中行
        //height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        height: $(window).height() * 0.91,
        uniqueId: "userId", //每一行的唯一标识，一般为主键列
        // showToggle: true, //是否显示详细视图和列表视图的切换按钮
        // cardView: false, //是否显示详细视图
        // detailView: false, //是否显示父子表
        // showExport: true, //是否显示导出
        exportDataType: "selected", //basic', 'all', 'selected'
        columns: [{
            field: 'phone',
            title: '匹配用户',
            width: '100px'
        }],
        responseHandler: function (res) {
            return {
                "total": res.total, //总页数
                "rows": res.rows //数据
            };
        }
    });
    $tableRight = $('#table-methods-table-z').bootstrapTable({
        url: '/multiword/checkFailure', //请求后台的URL（*）
        method: 'post', //请求方式（*）
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true,
        dataType: "json",
        pagination: true,
        // "queryParamsType": "limit",
        singleSelect: false,
        contentType: "application/x-www-form-urlencoded",
        pageSize: 50,
        pageNumber: 1,
        search: false, //不显示 搜索框
        showColumns: false, //不显示下拉框（选择显示的列）
        sidePagination: "server", //服务端请求
        queryParams: queryParams,
        //minimunCountColumns: 2,
        pageList: [50, 200, 500], //可供选择的每页的行数（*）
        //queryParams : oTableInit.queryParams,//传递参数（*）
        searchOnEnterKey: true,
        // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        //showColumns: true, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: false, //是否启用点击选中行
        //height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        height: $(window).height() * 0.91,
        uniqueId: "userId", //每一行的唯一标识，一般为主键列
        // showToggle: true, //是否显示详细视图和列表视图的切换按钮
        // cardView: false, //是否显示详细视图
        // detailView: false, //是否显示父子表
        // showExport: true, //是否显示导出
        exportDataType: "selected", //basic', 'all', 'selected'
        columns: [{
            field: 'phone',
            title: '不匹配用户',
            width: '100px'
        }, {
            field: 'uuid',
            title: '操作',
            width: '80px',
            formatter: function (value, row, index) {
                console.log(row.status);
                var btns = '<a href="javascript:void(0);" onClick="dels(\'' + row.memberId + '\',\'' + row.taskId + '\',\'' + row.status + '\')">剔除列表</a>';
                return btns;
            }
        }],
        responseHandler: function (res) {
            return {
                "total": res.total, //总页数
                "rows": res.rows //数据
            };
        }
    });
    $tableRight = $('#table-methods-table-x').bootstrapTable({

        url: '/multiword/none', //请求后台的URL（*）
        method: 'post', //请求方式（*）
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true,
        dataType: "json",
        pagination: true,
        // "queryParamsType": "limit",
        singleSelect: false,
        contentType: "application/x-www-form-urlencoded",
        pageSize: 100,
        pageNumber: 1,
        search: false, //不显示 搜索框
        showColumns: false, //不显示下拉框（选择显示的列）
        sidePagination: "server", //服务端请求
        queryParams: queryParams,
        //minimunCountColumns: 2,
        pageList: [100, 200, 500], //可供选择的每页的行数（*）
        //queryParams : oTableInit.queryParams,//传递参数（*）
        searchOnEnterKey: true,
        // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: true,
        //showColumns: true, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: false, //是否启用点击选中行
        //height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        height: $(window).height() * 0.91,
        uniqueId: "userId", //每一行的唯一标识，一般为主键列
        // showToggle: true, //是否显示详细视图和列表视图的切换按钮
        // cardView: false, //是否显示详细视图
        // detailView: false, //是否显示父子表
        // showExport: true, //是否显示导出
        exportDataType: "selected", //basic', 'all', 'selected'
        columns: [{
            field: 'phone',
            title: '导入-额外号码',
            width: '100px'
        }],
        responseHandler: function (res) {
            return {
                "total": res.total, //总页数
                "rows": res.rows //数据
            };
        }
    });

    $("#search_btn").click(function () {
        $('#table-methods-table-left').bootstrapTable('refresh');
        $('#table-methods-table-s').bootstrapTable('refresh');
        $('#table-methods-table-z').bootstrapTable('refresh');
        $('#table-methods-table-x').bootstrapTable('refresh');
    });

    $("#mate_btn").click(function () {
        if (!$('#taskId').val()) {
            alert('请先选择任务！');
            return;
        }
        var taskId = $('#taskId').val();
        var stime = $('#startTime').val();
        var etime = $('#endTime').val();
        if (confirm("是否匹配？")) {
            $.post("/multiword/uploads", {
                taskid: taskId,
                stime: stime,
                etime: etime
            }, function (res) {

                $('#table-methods-table-s').bootstrapTable('refresh');
                $('#table-methods-table-z').bootstrapTable('refresh');
                $('#table-methods-table-x').bootstrapTable('refresh');
                alert(res);
            });
        }

    });
    $("#uploadCheckT").click(function () {
        var taskId = $('#taskId').val();
        if (confirm("是否审核通过？")) {
            $.post("/multiword/uploadCheckT", {
                taskid: taskId
            }, function (res) {
                $('#table-methods-table-s').bootstrapTable('refresh');
                alert(res);
            });
        }
    });

    // 删除
    var dels = function (memberId, taskId, status) {
        if (confirm("确定剔除？")) {
            $.post("/multiword/dels/", {
                memberId: memberId,
                taskId: taskId,
                status: status
            }, function (res) {
                alert(res);
                $('#table-methods-table-z').bootstrapTable('refresh');
            });
        }
    };

    $("#uploadCheckF").click(function () {
        var taskId = $('#taskId').val();
        if (confirm("是否审核失败？")) {
            $.post("/multiword/uploadCheckF", {
                taskid: taskId
            }, function (res) {
                //table.bootstrapTable('refresh');
                alert(res);
            });
        }
    });
    $("#delData").click(function () {
        var taskId = $('#taskId').val();
        if (confirm("是否清除数据？")) {
            $.post("/multiword/delData", {
                taskid: taskId
            }, function (res) {
                $('#table-methods-table-left').bootstrapTable('refresh');
                $('#table-methods-table-s').bootstrapTable('refresh');
                $('#table-methods-table-z').bootstrapTable('refresh');
                $('#table-methods-table-x').bootstrapTable('refresh');
                alert(res);
            });
        }
    });
    // 导入
    $("#upload_btn").click(function () {
        if (!$("#file")[0].files[0]) {
            alert('请先上传文件！');
            return;
        }
        if (!$('#taskId').val()) {
            alert('请先选择任务！');
            return;
        }
        if (confirm("是否导入？")) {
            var formData = new FormData();
            var taskId = $('#taskId').val();
            formData.append('file', $("#file")[0].files[0]);
            formData.append('taskId', taskId);
            $.ajax({
                type: 'POST',
                url: '/multiword/upload',
                data: formData,
                async: false,
                cache: false,
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                success: function (res) {
                    console.log(res);
                    alert(res);
                    $('#table-methods-table-left').bootstrapTable('refresh');
                }

            });
        }
    });


</script>

</body>

</html>
    
